<template>
  <ElPagination
    style="margin-top: 10px;"
    v-model:current-page="props.page.page"
    v-model:page-size="props.page.size"
    hide-on-single-page
    small
    background
    layout="total, prev, pager, next, sizes, jumper"
    :total="total"
    @change="onChange"
  />
</template>

<script setup lang="ts">
import { ElPagination } from 'element-plus'
interface Props {
  page: {
    page: number;
    size: number;
  },
  total: number
}
const props = withDefaults(defineProps<Props>(), {
  page: () => ({ page: 1, size: 10 }),
  total: 0
})

const emit = defineEmits()
const onChange = (page, size) => {
  emit('changePage', { page, size })
}
</script>